{{define "title"}}Auth Service - Lookup{{end}}

{{define "content"}}

<style>
  .popover {
    max-width: 100%;
  }

  .popover-body {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
</style>

<script type="text/javascript" src="/ui/static/js/lookup.js"></script>

<div class="container px-0" id="content-box">
  <!-- Search bar. -->
  <div id="search-bar" class="row">
    <div class="input-group">
      <input class="form-control" type="search" aria-label="Search" placeholder="An email or group name" disabled>
      <button type="button" class="btn btn-outline-secondary" disabled>
        <i class="bi bi-search" style="font-size: 16px; color: #333"></i>
      </button>
    </div>
  </div>

  <!-- Placeholder for loading box. -->
  <div id="loading-box-placeholder"></div>

  <!-- Placeholder for lookup results. -->
  <div id="all-results" class="mt-4"></div>

  <!-- Placeholder for lookup error. -->
  <div id="api-error-placeholder" class="mt-4"></div>
</div>

<template id="all-results-template">
  <!-- The principal being searched. -->
  <div class="row">
    <div class="col">
      <hr class="my-0" />
      <h3 class="text-center my-3">
        <a id="principal-header"></a>
      </h3>
      <hr class="my-0" />
    </div>
  </div>

  <div class="row mt-3">
    <!-- Groups the principal is directly in. -->
    <div class="col-md-6">
      <h4>Directly included by</h4>
      <div id="direct-groups" class="group-results">
        <div class="text-secondary">
          <p><i>None</i></p>
        </div>
      </div>
    </div>

    <!-- Groups the principal is indirectly in. -->
    <div class="col-md-6">
      <h4>Indirectly included by</h4>
      <div id="indirect-groups" class="group-results">
        <div class="text-secondary">
          <p><i>None</i></p>
        </div>
      </div>
    </div>
  </div>
</template>

<template id="result-template">
  <div>
    <a></a>
  </div>
</template>

{{end}}